<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    /* ========================= */
        /* -------->内联样式
        <style type="text/css">
          div{
            background-color: blueviolet;
            width: 200px;
            height: 300px;
          }
        </style> */
        *{
            margin: 0px;
            padding: 0px;
        }

        #outer>li{
            border: 1px solid blueviolet;
        }

        /* 内联式 */
        /* div{
            background-color: blueviolet;
            width: 200px;
            height: 300px;
        } */
/* ========================= */
         /* -----外部引入，不建议使用,优先解析html 
        @import url("./outer.css");//import引入需要写在style标签中url中写当前文件的路径 */

    </style>
<!-- ========================= -->
    <!-- --------外部引入，优先解析css
    <link rel="stylesheet" href="./outer.css"> //link引入写在style属性外，href属性用来设置引入外部文件的地址 -->

</head>
<body>
        <!-- 行内样式
        <div style="background-color: bisque; width: 100px; height: 100px;"></div>
     -->
        <div></div>
    
        <ul id="outer">
            <li>
                1
                <ul>
                    <li>11</li>
                </ul>
            <li>
            <li>
                <ul>
                    <li></li>
                </ul>
            </li>
            <li>
                <ul>
                    <li></li>>
                </ul>
            </li>>
        </ul>
    
    /*<div style="width:100px;height:100px;background-color:red">

    </div>*/
    <div ></div>
</body>
</html>